<!--
 * @Author: wcx 1055127249@qq.com
 * @Date: 2025-01-07 16:42:11
 * @LastEditors: wcx 1055127249@qq.com
 * @LastEditTime: 2025-01-21 08:42:21
 * @FilePath: \my-project\src\views\CreateFormBiz\components\configField.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="config-field">
    <div class="field-label">
      <span>{{ label }}</span>
      <slot name="right"></slot>
    </div>
    <div v-if="this.$slots.default">
      <slot></slot>
    </div>
    <div v-else>
      <component :is="is" size="small" v-model="inputValue" style="width: 100%" v-bind="$attrs">
        <template v-if="options">
          <el-option v-for="o in options" :label="o" :value="o"></el-option>
        </template>
      </component>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ConfigField',
  props: {
    type: {
      type: String,
      default: 'input'
    },
    label: String,
    options: Array,
    value: Number | String | Boolean | Array | Object
  },
  computed: {
    is() {
      return 'el-' + this.type
    },
    inputValue: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      },
    },
  }
}
</script>

<style lang="scss" scoped>
.config-field {
  margin-bottom: 20px;
}

.field-label {
  font-size: 14px;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
}
</style>